import vue from 'vue';
import Vuex from 'vuex';

vue.use(Vuex);
// 持久化插件
import createPersistedState from 'vuex-persistedstate';

export default new Vuex.Store({
    //定义变量
    state: {
        //导航栏配置
        sidebarPage: '2',
        //title颜色
        homeColor: '#242f42',
        //导航栏颜色
        sidebarColor: '#324157',
        //主题颜色
        themeColor: '#409EFF',
        //默认头像
        headPhotoInfo: '1'
    },
    //一般用过滤和计算属性
    getters: {
        sidebarPage(state) {
            return state.sidebarPage;
        },
        homeColor(state) {
            return state.homeColor;
        },
        sidebarColor(state) {
            return state.sidebarColor;
        },
        themeColor(state) {
            return state.themeColor;
        },
        headPhotoInfo(state) {
            return state.headPhotoInfo;
        }
    },
    //提交更新数据的方法，必须是同步的
    mutations: {
        SET_SIDEBARPAGE(state, list) {
            state.sidebarPage = list;
        },
        SET_HOMECOLOR(state, list) {
            state.homeColor = list;
        },
        SET_SIDEBARCOLOR(state, list) {
            state.sidebarColor = list;
        },
        SET_THEMECOLOR(state, list) {
            state.themeColor = list;
        },
        SET_HEADPHOTOINFO(state, list) {
            state.headPhotoInfo = list;
        }
    },
    //1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
    actions: {},
    plugins: [
        createPersistedState({ storage: window.localStorage })
    ]
});
